<template>
  <div class="tree-layer">
    <div class="check-row">
      <div>全选</div>
      <el-checkbox @change="toggleAllCheckBox()" v-model="isVisible">显示</el-checkbox>
      <el-checkbox @change="toggleAllCheckBox()" v-model="isCheck">选择</el-checkbox>
      <!-- <el-checkbox @change="toggleAllCheckBox()" v-model="isCapturable">捕捉</el-checkbox> -->
    </div>
    <el-collapse v-model="activeNames">
      <el-collapse-item v-for="m in allLayerData" :key="m.W_SYS_ROOT_ID" :title="m.TITLENAME" :name="m.W_SYS_ROOT_ID">
        <div class="check-row" v-for="n in m.child" :key="n.C_SYS_ROOT_ID">
          <div>{{ n.FEATURENAME }}</div>
          <el-checkbox @change="onChildChange(n, m, 'visible')" v-model="n.isVisible">显示</el-checkbox>
          <el-checkbox @change="onChildChange(n, m, 'check')" v-model="n.isCheck">选择</el-checkbox>
          <!-- <el-checkbox @change="onChildChange(n, m, 'capturable')" v-model="n.isCapturable" disabled>捕捉</el-checkbox> -->
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import _ from 'lodash'
import { getLayerManagerInfo } from '../../../widgets/mapUtils'
export default {
  async mounted() {
    const allLayerData = await getLayerManagerInfo()
    this.setCheck(allLayerData, { isVisible: true, isCheck: true, isCapturable: true })
    this.allLayerData = allLayerData.filter(i => {
      const layerType3 = i.child.every(child => `${child.LAYERTYPE}` === `3`)
      return !layerType3
    })
    console.error(this.allLayerData)
    this.activeNames = this.allLayerData.map(i => i.W_SYS_ROOT_ID)
    this.$bus.$emit('CHANGE_LAYER_CHECK', this.allLayerData)
  },
  data() {
    return {
      isVisible: true,
      isCheck: true,
      isCapturable: true,
      activeNames: [],
      allLayerData: [],
      checkAll: false
    }
  },
  methods: {
    toggleAllCheckBox() {
      this.setCheck(this.allLayerData, {
        isVisible: this.isVisible,
        isCheck: this.isCheck,
        isCapturable: this.isCapturable
      })
      this.$bus.$emit('CHANGE_LAYER_CHECK', this.allLayerData)
    },
    setCheck(data, { isVisible, isCheck, isCapturable }) {
      data.forEach(i => {
        i.isVisible = isVisible
        i.isCheck = isCheck
        i.isCapturable = isCapturable
        if (i.child) {
          this.setCheck(i.child, { isVisible, isCheck, isCapturable })
        }
      })
    },
    // 子级checkbox change事件
    onChildChange(child, parent, type) {
      // 更新父级状态
      this.updateParentStatus(parent, type)
      // 更新顶层checkbox状态
      this.updateTopLevelStatus(type)
    },
    // 更新父级状态
    updateParentStatus(parent, type) {
      // 检查所有子项的状态
      const allSame = _.every(parent.child, item => item[`is${_.capitalize(type)}`])
      // 更新父级状态
      parent[`is${_.capitalize(type)}`] = allSame
    },
    // 更新顶层checkbox状态
    updateTopLevelStatus(type) {
      // 检查所有顶层项的子项状态是否全部一致
      const allSame = _.every(this.allLayerData, topItem => {
        return _.every(topItem.child, child => child[`is${_.capitalize(type)}`])
      })
      // 更新顶层checkbox状态
      this[`is${_.capitalize(type)}`] = allSame
      // 触发事件通知
      this.$bus.$emit('CHANGE_LAYER_CHECK', this.allLayerData)
    }
  }
}
</script>
<style lang="scss">
.tree-layer {
  padding: 16px 8px;
  .el-collapse-item__header,
  .el-collapse-item__wrap,
  .el-collapse-item__content {
    background-color: transparent;
    color: var(--text-color);
    border-color: var(--text-color);
  }
  .el-checkbox {
    color: var(--text-color);
  }
  .check-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 4px 0;
    .el-checkbox {
      margin: 0 8px 0 0;
    }
    .el-checkbox__label {
      padding: 0;
    }
    div:first-child {
      flex: 1;
      margin-right: 8px;
      text-overflow: ellipsis;
      font-size: 14px;
    }
  }
  .el-collapse {
    border: 0;
  }
}
</style>
